<template>
	<view>
		<!-- <view class="header">
			<image src='https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132'></image>
		</view>
		<view class='content'>
			<view>申请获取以下权限</view>
			<text>获得你的公开信息(昵称，头像等)</text>
		</view>
		<button class='button btn-normal' style="width: 500rpx;" type='primary'
			@click="login">授权登录</button>
		<button class="button btn-normal" style="width: 500rpx; margin-top: 20rpx">暂不登录</button>

		<uv-popup ref="showLoginPop" :close-on-click-overlay="false" mode="bottom">
			<view class="popupBox">
				<view class="h2 bold">获取您的昵称、头像</view>
				<view class="h3">获取用户头像、昵称，主要用于向用户提供具有辨识度的用户中心界面</view>
				<view class="form">
					<view class="input u-flex">
						<view class="h2">头像</view>
						<view class="info">
							<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<image class="avatar" :src="avatarUrl"></image>
							</button>
						</view>
						<u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
					</view>
					<view class="input u-flex">
						<view class="h2">昵称</view>
						<view class="info">
							<input type="nickname" v-module="nickName" placeholder="请输入昵称" @blur="onBlur" />
						</view>
					</view>
				</view>
				<view class="submit" style="background: #1fba1a" @click="saveUserInfo">确定</view>
			</view>
		</uv-popup> -->
	</view>
</template>
<script>
	import * as api from '@/api/login'
	import * as userApi from '@/api/user'
	import storage from '@/utils/storage'
	import config from '@/config'
	export default {
		data() {
			return {
				canIUse: true,
			}
		},
		onLoad() {
			var that = this;
			uni.login({
				provider: 'weixin', //使用微信登录
				success: function(loginRes) {
					api.wxLogin({
						"wxcode": loginRes.code
					}).then(res => {
						// 保存tokne，过期时间30天
						storage.set('authToken', res.data.token, 30 * 86400)
						// 返回上一页
						uni.navigateBack({
							delta: 1
						});
					});
				}
			});
			
		},
		methods: {
			/*onBlur(e) {
				this.nickName = e.detail.value
			},
			onChooseAvatar(e) {
				var that = this;
				uni.uploadFile({
					url: config.apiUrl + 'user/upload', // 替换成你的上传接口地址
					filePath: e.detail.avatarUrl, // 传入本地文件路径
					name: 'file', // 服务器接收的文件字段名
					success(uploadFileRes) {
						let data = JSON.parse(uploadFileRes.data)
						console.log(data, 'uploadFileRes');
						that.avatarUrl = data.data.url
					},
					fail(err) {
						console.error('上传失败', err);
					}
				});
			},
			login() {
				var that = this;
				let wxAuthInfo = {};
				uni.login({
					provider: 'weixin', //使用微信登录
					success: function(loginRes) {
						wxAuthInfo.code = loginRes.code;
					}
				});
				uni.getUserProfile({
					desc: "用于完善会员资料",
					success: async (res) => {
						wxAuthInfo.userInfo = res.userInfo;
						api.wxLogin({
							"wxcode": wxAuthInfo.code,
							"nickname": that.nickName,
							"avatar_url": that.avatarUrl
						}).then(res => {
							// 保存tokne，过期时间30天
							storage.set('authToken', res.data.token, 30 * 86400)
							// 判断是否为默认昵称
							userApi.dashboard().then(res => {
								if (res.data.nickname == '微信用户') {
									that.$refs.showLoginPop.open()
								} else {
									// 返回上一页
									uni.navigateBack({
										delta: 1
									});
								}
							});
						});
					},
				});
			},
			saveUserInfo() {
				if (!this.avatarUrl) {
					uni.showToast({
						title: '请上传头像',
						icon: 'error',
						duration: 3000
					});
				} else {
					if (!this.nickName) {
						uni.showToast({
							title: '请填写昵称',
							icon: 'error',
							duration: 3000
						});
					} else {
						userApi.saveUserInfo({
							"nickname": this.nickName,
							"avatar_url": this.avatarUrl
						}).then(res => {
							this.$refs.showLoginPop.close();
							// 返回上一页
							uni.navigateBack({
								delta: 1
							});
						});
					}
					
				}
			}*/
		}
	}
</script>
<style>
	.header {
		margin: 90rpx 0 50rpx 50rpx;
		border-bottom: 1px solid #ccc;
		text-align: center;
		width: 650rpx;
		height: 300rpx;
	}

	.header image {
		width: 200rpx;
		height: 200rpx;
	}

	.content {
		margin-left: 50rpx;
		margin-bottom: 100rpx;
	}

	.content text {
		display: block;
		color: #9d9d9d;
		margin-top: 40rpx;
	}

	.bottom {
		/* border-radius: 80rpx; */
		margin: 70rpx 50rpx;
		font-size: 35rpx;
	}
</style>
<style lang="scss" scoped>
	.popupBox {
		width: 100%;
		// padding: 50rpx 40rpx 30rpx;

		.h2 {
			color: #333;
			font-size: 32rpx;
		}

		.h3 {
			font-size: 26rpx;
			color: #999;
			line-height: 1.4;
			padding-top: 14rpx;
		}

		.bold {
			font-weight: bold;
		}

		.form {
			margin-top: 30rpx;
			border-top: 1px solid #EFEFEF;

			.input {
				padding: 24rpx 0;
				border-bottom: 1px solid #EFEFEF;

				.info {
					flex: 1;
					margin-left: 30rpx;

					.avatar-wrapper {
						padding: 0;
						width: 70rpx;
						height: 70rpx;
						border-radius: 10rpx;

						.avatar {
							width: 70rpx;
							height: 70rpx;
							border-radius: 10rpx;
						}
					}

					input {
						background: transparent;
						width: 100%;
						height: 70rpx;
						color: #333;
						font-size: 30rpx;
					}
				}
			}
		}
	}

	.submit {
		margin-top: 30rpx;
		width: 100%;
		height: 92rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 92rpx;
		color: #fff;
		font-size: 32rpx;
		background: #E83F3C;
	}
</style>